<script setup>
import { ref } from 'vue'
import { inject, onMounted } from 'vue'
const echarts = inject('echarts')
const axios = inject('axios')
let dataList = ref([])
// 获取数据
async function fetchData() {
  const res = await axios.get('/api/chartChina/data')
  dataList.value = res.data.data
}
// 实现挂载
let myChart
onMounted(() => {
  fetchData().then(() => {
    // 地图注册
    echarts.registerMap('china', dataList.value)
    myChart = echarts.init(document.getElementById('china-map'))
    const option = {
      title: {},
      tooltip: {
        formatter: (params) => {
          return (
            params.data.name + '</br>' + '数值:' + params.data.value[2] + '</b>'
          )
        }
      },
      geo: {
        map: 'china',
        width: '70%',
        // 区域样式
        itemStyle: {
          areaColor: '#0099ff',
          borderColor: '#00ffff',
          shadowColor: 'rgba(230, 130, 70, 0.5)'
          // shadowBlur: 10
        },
        // 鼠标悬停高亮配置（放在 geo 层）
        emphasis: {
          focus: 'self',
          label: { show: true }
        }
      },
      // 散点图，在地图坐标系中使用散点,
      series: [
        {
          type: 'scatter',
          itemStyle: {
            color: 'red'
          },
          name: '所在城市销售额',
          coordinateSystem: 'geo',
          data: [
            { name: '北京', value: [116.46, 39.92, 4367] },
            { name: '上海', value: [121.48, 31.22, 8675] },
            { name: '深圳', value: [114.07, 22.62, 2461] },
            { name: '广州', value: [113.23, 23.16, 187] },
            { name: '西安', value: [108.45, 34, 3421] }
          ]
        }
      ],
      // 视觉组件
      // 2. visualMap 视觉映射组件（核心：数据→视觉）
      visualMap: {
        show: true, // 是否显示组件（默认true，左下角位置）
        type: 'continuous', // 映射类型：continuous（连续）/ piecewise（分段）
        min: 0, // 数据最小值（需与实际数据匹配）
        max: 10000, // 数据最大值（需与实际数据匹配）
        left: 'left', // 组件位置（默认左下角，可调整为'right'/'top'）
        bottom: '10%',
        text: ['高', '低'], // 组件两端文本提示
        calculable: true, // 是否显示拖拽手柄（允许用户手动调整范围）
        inRange: {
          // 数值范围内的视觉样式：颜色渐变（从浅到深）
          color: [
            '#e0f7fa',
            '#b2ebf2',
            '#80deea',
            '#4dd0e1',
            '#26c6da',
            '#00bcd4',
            '#00acc1'
          ]
        },
        dimension: 2, // 关联数据的维度（0=区域名称，1=数值，需与series.data对应）
        seriesIndex: 0 // 关联的series索引（如果有多个series，指定对应索引）
      }
    }
    myChart.setOption(option)
  })
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>
<template>
  <div class="map" id="china-map"></div>
</template>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: 90%;
  margin-top: 2%;
  // background-color: aqua;
}
</style>
